import React, { useState, useEffect } from "react";
import { Modal, Button, Space, Alert } from "antd";
import { ExclamationCircleOutlined, ReloadOutlined } from "@ant-design/icons";

declare global {
  interface Window {
    pluginWebUpdateNotice_: {
      closeNotification: () => void;
    };
  }
}
/**
 * 版本更新检查组件
 * 功能：定期检查服务器上的版本信息，当检测到新版本时提示用户更新
 * 更新机制：通过刷新页面加载最新资源
 */
const VersionUpdateCheck: React.FC = () => {
  const [updateNotice, setUpdateNotice] = useState(false);

  const handlePluginWebUpdateNotice = () => {
    setUpdateNotice(true);
  };

  const handleClose = () => {
    setUpdateNotice(false);
  };

  const handleRefresh = () => {
    setUpdateNotice(false);
    window.location.reload();
  };

  useEffect(() => {
    window.addEventListener("plugin_web_update_notice", handlePluginWebUpdateNotice);
  }, []);

  return (
    <Modal
      title={
        <Space>
          <ExclamationCircleOutlined style={{ color: "#faad14" }} />
          <strong>系统更新提示</strong>
        </Space>
      }
      open={updateNotice}
      onCancel={handleClose}
      footer={
        <Space>
          <Button onClick={handleClose}>我知道了，后续手动刷新页面</Button>
          <Button type="primary" icon={<ReloadOutlined />} onClick={handleRefresh}>
            立即更新
          </Button>
        </Space>
      }
      width={500}
      closable={false}
      maskClosable={false}
      centered
    >
      <Alert
        message="发现新版本"
        description={
          <div>
            <p>系统已发布新版本，是否立即更新获取最新功能？</p>
            <p style={{ fontSize: "12px", color: "#666", marginTop: "8px" }}>
              • 更新将刷新当前页面，请确保已保存所有重要数据
              <br />• 更新过程只需几秒钟
            </p>
          </div>
        }
        type="warning"
        showIcon
        style={{ marginBottom: "16px" }}
      />
    </Modal>
  );
};

export default VersionUpdateCheck;
